<template>
<div class="order flex-column">
    <van-tabs v-model="active" title-active-color="#ea251c" line-width="0" swipeable @change="tabChange">
        <van-tab title="待付款" :name="0"> </van-tab>
        <van-tab title="待收货" :name="1"> </van-tab>
        <van-tab title="已完成(退换/售后)" :name="2"> </van-tab>
        <van-tab title="全部订单" :name="3"> </van-tab>
    </van-tabs>

    <van-swipe class="my-swipe flex-1" ref="vanSuipe" :loop="false" :show-indicators="false" @change="swipeChange">
        <van-swipe-item>
            <div class="order-box overflow-y">
                <!-- <template v-if="active == 0"> -->
                    <Order v-for="item in list" :key="item.id" :value="item"  @cancelOrder="handelCancel" @confirmTake="confirmTake" />
                <!-- </template> -->
            </div>
        </van-swipe-item>
        <van-swipe-item>
            <div class="order-box overflow-y">
                <!-- <template v-if="active == 1"> -->
                    <Order v-for="item in list" :key="item.id" :value="item"  @cancelOrder="handelCancel" @confirmTake="confirmTake" />
                <!-- </template> -->
            </div>
        </van-swipe-item>
        <van-swipe-item>
            <div class="order-box overflow-y">
                <!-- <template v-if="active == 2"> -->
                    <Order v-for="item in list" :key="item.id" :value="item"  @cancelOrder="handelCancel" @confirmTake="confirmTake" />
                <!-- </template> -->
            </div>
        </van-swipe-item>

        <van-swipe-item>
            <div class="order-box overflow-y">
                <!-- <template v-if="active == 3"> -->
                    <Order v-for="item in list" :key="item.id" :value="item" @cancelOrder="handelCancel" @confirmTake="confirmTake" />
                <!-- </template> -->
            </div>
        </van-swipe-item>
    </van-swipe>


</div>
</template>

<script>
import Order from '@/components/order.vue'
let status = {
    0: 'wait_pay',
    1: 'receive',
    2: 'completed',
    3: 'all'
}
export default {
    data() {
        return {
            active: 0,
            list: []
        };
    },
    created() {
        const { index } = this.$route.params;
        if (index) {
            this.active = +index;
        }
    },
    mounted () {
        
            this.getOrderList();
    },
    methods: {
        swipeChange(index) {
            this.active = index;
            this.$nextTick(() => {
                this.getOrderList();
            })
        },
        tabChange(index) {
            this.$refs.vanSuipe.swipeTo(index);
        },
        confirmTake (id) {
            this.$dialog.confirm({
                title: "提示",
                message: "请确认收到商品，收到完好商品！",
            })
            .then(() => {
                this.$buyer.confirmReceive(id).then(() => {
                    this.$toast.success('订单收货已经确认！')
                    this.getOrderList()
                })
            });
        },
        // 取消订单
        handelCancel(id) {
            this.$dialog.confirm({
                title: "提示",
                message: "确认取消当前订单?",
            })
            .then(() => {
                console.log(id)
                this.$buyer.caneclOrder(id).then(() => {
                    this.$toast.success('订单已经取消')
                    this.getOrderList()
                })
            });
        },
        del() {
            this.$dialog.confirm({
                title: "提示",
                message: "确认删除当前订单?",
            })
                .then(() => {
                // on confirm
                console.log("confirm");
            });
        },
        // 获取订单
        getOrderList() {
            // all-全部 cancel-取消 wait_pay-代付款 send-待发货 receive-已发货 completed-已完成 refund-售后
            this.list = [];
            this.$buyer.getUserOrder(status[this.active]).then(res => {
                // console.log(res)
                this.list = res.data.list;
            });
        }
    },
    components: { Order }
}
</script>

<style lang="less" scoped>
.order-box {
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
}

.order-item {
    background-color: #fff;
    padding: 10px 20px;
    margin-bottom: 10px;
    &:first-child {
        margin-top: 10px;
    }
    .shop-name {
        padding: 0 0 10px 0;
    }
    .order-goods {
        img {
            width: 80px;
            height: 80px;
        }
        .goods_msg {
            height: 80px;
            padding-left: 10px;
        }
    }
}
.button {
    padding: 2px 10px;
}
</style>
